<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多图切换</title>
</head>
<body>
 <img src="img/j1.png" id="picid"/>
<br>
<input type="button" id ="pre" value="上一张">
<input type="button" id ="next" value="下一张">
</body>
</html>

<script>
    //定义数组
    array=[
        "img/j1.png",
        "img/j2.png",
        "img/j3.png",
        "img/j4.png",
        "img/j5.png"
    ];
    //定义数组的索引值
    index = 0;
    //绑定事件:上一张
    document.querySelector("#pre").onclick = function () {
        index-- ;
        index = index < 0 ? array.length-1 :index ;
        document.querySelector("#picid").setAttribute("src",array[index]);
    }

    //绑定事件:下一张
    document.querySelector("#next").onclick = function () {
        index++;
        index = index >= array.length ? 0 : index;
        document.querySelector("#picid").setAttribute("src", array[index]);
    }
</script>